<div style="padding: 16px;">

            <!-- 内容主体区域  面包屑-->
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>用户管理</cite></a>
              <a><cite>角色权限</cite></a>
            </span>

            <!-- 水平线 -->
            <hr class="layui-bg-blue">

            <!-- 搜索条件 -->
            <fieldset class="layui-elem-field">
                <legend>筛选条件</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">角色名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="search_username" placeholder="请输入角色名称" class="layui-input">
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
                            <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
                            <button class="layui-btn layui-btn-radius layui-btn-success" id="insertData">新增角色
                            </button>
                        </div>
                    </div>
                </div>
            </fieldset>

            <table class="layui-hide" id="test" lay-filter="test"></table>
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                </div>
            </script>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="authorize">授权</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

            <script type="text/html" id="insert_form">
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">角色名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="insert_name" class="layui-input" placeholder="请输入角色名称">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-inline">
                            <input type="text" id="insert_remark" class="layui-input" placeholder="请输入备注">
                        </div>
                    </div>
                </div>
            </script>

            <script type="text/html" id="role_form">
                <div id="ID-tree-demo"></div>
            </script>

        </div>

<script>
    function flushTable() {
        tableflush();
    }

    $("#searchVal").click(function () {
        let search_username = $("#search_username").val();
        tableflush(search_username);
    });

    $("#iReset").click(function () {
        $("#search_username").val('');
        tableflush();
    });

    $("#insertData").click(function () {
        layer.open({     // 弹出框处理  模态框
            type: 1               // 模态框
            , title: '新增角色' //不显示标题栏
            , closeBtn: false
            , area: ['500px', '500px']  // 宽和高
            , shade: 0.5
            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
            , btn: ['新增', '取消']
            , btnAlign: 'c'
            , moveType: 1 //拖拽模式，0或者1
            , content: $('#insert_form').html()         // 引入自定义表单
            , btn1: function (index, layero) {            // 这个是新增按钮点击事件
                // layer.msg("新增按钮执行");
                let name = $("#insert_name").val();
                let remark = $("#insert_remark").val();
                // layer.msg("username=" + username + "  password=" + password);
                $.ajax({
                    url: "/rolePermissions",           // 请求路径
                    type: "post",                  // 请求的方式，不区分大小写
                    cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify({
                        name: name,
                        remark: remark
                    }),
                    datatype: "json",        // 返回类型，text文本、html页面、json数据
                    success: function (response) {
                        console.log("返回: " + response);
                        if (response.code === 0) {
                            layer.msg('操作成功', {icon: 1});
                            layer.close(index);                         // 关闭当前窗口
                            flushTable();
                        } else {
                            layer.msg("操作失败！", {icon: 2});
                        }
                    },
                    error: function (response) {
                        console.log("出错返回: " + response);
                        layer.msg("操作失败！", {icon: 2});
                    }
                });
            }
            , success: function (layero) {
                // 这里是为了弹出窗口初始化数据的
                // $("#insert_username").val("这是一个测试用户名");
            }
        });
    });

    function tableflush(search_username) {
        let param = {};
        if (search_username === undefined || search_username === null)
            search_username = '';
        param.name = search_username;              // {name:''}

        layui.use('table', function () {
            var table = layui.table;
            var tree = layui.tree;
            var layer = layui.layer;
            var util = layui.util;

            table.render({
                elem: '#test'
                , url: '/rolePermissions'
                , where: param
                , height: 'full-300'
                , toolbar: '#toolbarDemo'                          //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports']
                , title: '用户数据表'
                , cols: [[
                    {type: 'checkbox'}
                    , {field: 'name', title: '角色名称'}
                    , {field: 'remark', title: '备注'}
                    // , {
                    //     title: '密码', templet: function (res) {
                    //         return '<em>' + res.password + '</em>'
                    //     }
                    // }
                    , {title: '操作', toolbar: '#barDemo'}
                ]]
                , page: true
                , limits: [5, 10, 15, 20]
            });

            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;
                }
                ;
            });

            //监听行工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                //console.log(obj)
                if (obj.event === 'del') {
                    layer.confirm('确定删除该行吗？', function (index) {

                        $.ajax({
                            url: "/rolePermissions/" + data.id,           // 请求路径
                            type: "delete",                  // 请求的方式，不区分大小写
                            cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                            contentType: "application/json;charset=utf-8",
                            data: {},
                            datatype: "json",        // 返回类型，text文本、html页面、json数据
                            success: function (response) {
                                console.log("返回: " + response);
                                if (response.code === 0) {
                                    layer.msg('操作成功', {icon: 1});   // 关闭当前窗口
                                    obj.del();
                                } else {
                                    layer.msg("操作失败！", {icon: 2});
                                }
                            },
                            error: function (response) {
                                console.log("出错返回: " + response);
                                layer.msg("操作失败！", {icon: 2});
                            }
                        });

                    });
                } else if (obj.event === 'edit') {
                    layer.open({     // 弹出框处理  模态框
                        type: 1               // 模态框
                        , title: '编辑角色' //不显示标题栏
                        , closeBtn: false
                        , area: ['500px', '500px']  // 宽和高
                        , shade: 0.5
                        , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        , btn: ['保存', '取消']
                        , btnAlign: 'c'
                        , moveType: 1 //拖拽模式，0或者1
                        , content: $('#insert_form').html()         // 引入自定义表单
                        , btn1: function (index, layero) {            // 这个是新增按钮点击事件
                            // layer.msg("新增按钮执行");
                            let id = data.id;
                            let name = $("#insert_name").val();
                            let remark = $("#insert_remark").val();
                            // layer.msg("username=" + username + "  password=" + password);
                            $.ajax({
                                url: "/rolePermissions",           // 请求路径
                                type: "put",                  // 请求的方式，不区分大小写
                                cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                                contentType: "application/json;charset=utf-8",
                                data: JSON.stringify({
                                    id: id,
                                    name: name,
                                    remark: remark
                                }),
                                datatype: "json",        // 返回类型，text文本、html页面、json数据
                                success: function (response) {
                                    console.log("返回: " + response);
                                    if (response.code === 0) {
                                        layer.msg('操作成功', {icon: 1});
                                        layer.close(index);                         // 关闭当前窗口
                                        flushTable();
                                    } else {
                                        layer.msg("操作失败！", {icon: 2});
                                    }
                                },
                                error: function (response) {
                                    console.log("出错返回: " + response);
                                    layer.msg("操作失败！", {icon: 2});
                                }
                            });
                        }
                        , success: function (layero) {
                            // 这里是为了弹出窗口初始化数据的
                            // $("#insert_username").val("这是一个测试用户名");
                            $("#insert_name").val(data.name);
                            $("#insert_remark").val(data.remark);
                        }
                    });
                } else if (obj.event === 'authorize') {
                    console.log("authorize选项已点击");
                    // 这个是新增按钮点击事件

                    layer.open({     // 弹出框处理  模态框
                        type: 1               // 模态框
                        , title: '角色权限配置' //不显示标题栏
                        , closeBtn: false
                        , area: ['700px', '700px']  // 宽和高
                        , shade: 0.5
                        , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        , btn: ['保存', '取消']
                        , btnAlign: 'c'
                        , moveType: 1 //拖拽模式，0或者1
                        , content: $('#role_form').html()         // 引入自定义表单
                        , btn1: function (index, layero) {

                            // layer.msg("新增按钮执行");
                            // let id = data.id;
                            // let name = $("#insert_name").val();
                            // let remark = $("#insert_remark").val();
                            // layer.msg("username=" + username + "  password=" + password);
                            // $.ajax({
                            //     url: "/rolePermissions",           // 请求路径
                            //     type: "put",                  // 请求的方式，不区分大小写
                            //     cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                            //     contentType: "application/json;charset=utf-8",
                            //     data: JSON.stringify({
                            //         id: id,
                            //         name: name,
                            //         remark: remark
                            //     }),
                            //     datatype: "json",        // 返回类型，text文本、html页面、json数据
                            //     success: function (response) {
                            //         console.log("返回: " + response);
                            //         if (response.code === 0) {
                            //             layer.msg('操作成功', {icon: 1});
                            //             layer.close(index);                         // 关闭当前窗口
                            //             tableFlush();
                            //         } else {
                            //             layer.msg("操作失败！", {icon: 2});
                            //         }
                            //     },
                            //     error: function (response) {
                            //         console.log("出错返回: " + response);
                            //         layer.msg("操作失败！", {icon: 2});
                            //     }
                            // });
                            layer.msg('操作成功', {icon: 1});
                            layer.close(index);
                        }
                        , success: function (layero) {
                            // 模拟数据
                            var data = [
                                {
                                    title: '首页',
                                    checked: true,
                                    spread: true,
                                    id: 1
                                },
                                {
                                    title: '用户管理',
                                    spread: true,
                                    id: 2,
                                    children: [
                                        {
                                            title: '员工管理',
                                            checked: true,
                                            id: 3,
                                            spread: true
                                        },
                                        {
                                            title: '部门设置',
                                            checked: true,
                                            id: 4,
                                            spread: true
                                        },
                                        {
                                            title: '角色权限',
                                            checked: true,
                                            id: 5,
                                            spread: true
                                        }
                                    ]
                                },
                                {
                                    title: '车辆管理',
                                    spread: true,
                                    children: [
                                        {
                                            title: '车辆列表',
                                            spread: true
                                        },
                                        {
                                            title: '车辆保险',
                                            spread: true
                                        },
                                        {
                                            title: '车辆任务',
                                            spread: true
                                        }
                                    ]
                                },
                                {
                                    title: '计划管理',
                                    spread: true,
                                    children: [
                                        {
                                            title: '计划列表',
                                            spread: true
                                        },
                                        {
                                            title: '备品计划',
                                            spread: true
                                        },
                                        {
                                            title: '新品/林措',
                                            spread: true
                                        },
                                        {
                                            title: '电缆2计划',
                                            spread: true
                                        }
                                    ]
                                },
                                {
                                    title: '仓库管理',
                                    spread: true,
                                    children: [
                                        {
                                            title: '仓库设置',
                                            spread: true
                                        },
                                        {
                                            title: '库位设置',
                                            spread: true
                                        },
                                        {
                                            title: '转移记录',
                                            spread: true
                                        }
                                    ]
                                },
                                {
                                    title: '库存管理',
                                    spread: true,
                                    children: [
                                        {
                                            title: '物料管理',
                                            spread: true
                                        },
                                        {
                                            title: '库存查询',
                                            spread: true
                                        }
                                    ]
                                },
                                {
                                    title: '财务管理',
                                    spread: true,
                                    children: [
                                        {
                                            title: '出入库台账',
                                            spread: true
                                        },
                                        {
                                            title: '计划结算',
                                            spread: true
                                        },
                                        {
                                            title: '年度出入台账',
                                            spread: true
                                        }
                                    ]
                                },
                                {
                                    title: '统计报表',
                                    spread: true,
                                    children: [
                                        {
                                            title: '出车统计',
                                            spread: true
                                        },
                                        {
                                            title: '变电统计',
                                            spread: true
                                        },
                                        {
                                            title: '导线统计',
                                            spread: true
                                        },
                                        {
                                            title: '新品统计',
                                            spread: true
                                        },
                                        {
                                            title: '电缆统计',
                                            spread: true
                                        },
                                        {
                                            title: '物料出入统计',
                                            spread: true
                                        },
                                        {
                                            title: '人员任务统计',
                                            spread: true
                                        }
                                    ]
                                },
                                {
                                    title: '系统管理',
                                    spread: true,
                                    children: [
                                        {
                                            title: '消息通知',
                                            spread: true
                                        },
                                        {
                                            title: '定时任务',
                                            spread: true
                                        },
                                        {
                                            title: '菜单管理',
                                            spread: true
                                        },
                                        {
                                            title: '数据字典',
                                            spread: true
                                        }
                                    ]
                                }
                            ];

                            // 渲染
                            tree.render({
                                elem: '#ID-tree-demo',
                                data: data,
                                showCheckbox: true,  // 是否显示复选框
                                onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                                id: 'demo-id-1',
                                isJump: true, // 是否允许点击节点时弹出新窗口跳转
                                click: function (obj) {
                                    var data = obj.data;  //获取当前点击的节点数据
                                    layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
                                }
                            });
                        }
                    });
                }
            });
        });
    }

    tableflush();
</script>
